<template>
  <div class="from-design-wrapper">
    <div class="worksheet-config-header">
        <div class="custom-head-box">
            <span class="goback" @click="handleGoto">
                <i class="el-icon-arrow-left"></i>
            </span>
            <div class="edit-detail-wrap" @click="handleGoto">
                <span class="txt-info">正在编辑表单：</span>
                <span class="txt-name">{{workSheetData.workSheetName}}</span>
            </div>
            <div class="tabs">
                <div class="tab-item active">编辑字段</div>
                <div class="tab-item">表单设置</div>
                <div class="tab-item">公开发布</div>
            </div>
            <el-button size="medium" @click="handleGoto">关闭</el-button>
            <el-button type="primary" size="medium" @click="handleTopSubmit">保存</el-button>
        </div>
    </div>
    <avue-form-design style="height: 100vh;"
        ref="ameFormDesign"
        :options="workSheetData.widgetForm"
        @submit="handleSubmit"
        storage
        :custom-fields="customFields">
    </avue-form-design>
  </div>
</template>

<script>
import { getWorkSheet, workSheetUpdate } from "../api/workSheetApi";
export default {
  name: 'FromDesign',
  data() {
    return {
      customFields: [
        {
          title: '分割线',
          component: 'el-divider',//ele分割线
          span: 24,
          icon: 'el-icon-eleme',
          tips: '看我：自定义属性怎么用？',
          labelWidth: '0px',
          params: {
            html: '<h3 style="color:red">分割线标题</h3>',
            contentPosition: "left",
          }
        },
        {
          title: '警告',
          component: 'el-alert',
          labelWidth: '0px',
          span: 24,
          icon: 'el-icon-warning',
          tips: '看我：自定义事件怎么用？',
          params: {
            title: '警告警告警告警告',
            type: 'success'
          },
          event: {
            close: () => {
              console.log('alert关闭事件')
            }
          }
        },
      ],
      workSheetData: { column: [] }
    }
  },
  created() {
      this.getOptions()
  },
  methods: {
    getOptions() {
        getWorkSheet({ workSheetId: this.$route.params.workSheetId }).then(response => {
            if(Number(response.code) === 200){
                this.workSheetData = response.data
            }
        })
    },
    handleTopSubmit() {
        this.$refs.ameFormDesign.handleGenerate()
    },
    handleSubmit(val) {
      this.workSheetData.widgetForm = val
      workSheetUpdate(this.workSheetData).then(response => {
          if(Number(response.code) === 200){
              this.$router.push( { name:'WorkSheet', params: { appid: this.$route.params.appid } } );
          }
      })
      console.log('workSheetData',this.workSheetData);
    },
    handleGoto() {
        this.$router.push( { name:'WorkSheet', params: { appid: this.$route.params.appid } } );
    }
  }
}
</script>
<style lang="scss">
.from-design-wrapper{
    .worksheet-config-header{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        font-size: 13px;
        box-shadow: 0 2px 4px rgba(0,0,0,.15);
        padding-right: 15px;
        z-index: 1001;
        height: 50px;
        line-height: 50px;
        background-color: #fff;
        .custom-head-box{
            display: flex;
            align-items: center;
            height: 100%;
            min-height: 0;
            .goback{
                display: inline-block;
                width: 20px;
                padding: 0 20px;
                font-size: 15px;
                height: 50px;
                color: #333;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
            }
            .edit-detail-wrap{
                display: flex;
                flex: 1 1;
                font-size: 16px;
                margin-left: 12px;
                .txt-info{
                    font-weight: 700;
                    cursor: pointer;
                }
                .txt-name{
                    max-width: 360px;
                    cursor: pointer;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }
            }
            .tabs{
                position: absolute;
                left: 50%;
                margin-left: -116px;
                font-size: 14px; 
                text-align: center;
                .tab-item{
                    position: relative;
                    cursor: pointer;
                    font-weight: 500;
                    color: rgb(117, 117, 117);
                    padding: 0px 30px;
                    line-height: 50px;
                    display: inline-block;
                    text-decoration: none;
                    font-size: 14px;
                    &.active{
                        color: rgb(33, 150, 243);
                        &::after {
                            content: " ";
                            position: absolute;
                            left: 18px;
                            right: 18px;
                            bottom: 0px;
                            height: 3px;
                            background-color: rgb(33, 150, 243);
                        }
                    }
                }
            }
        }
    }
    &::before{
        content: " ";
        display: block;
        height: 50px;
    }
}
</style>

